<template>
	<view class="orderListWrapper">
		<view class="filterBox">
			
			<u-tabs :list="list" :is-scroll="false" :current="params.status" @change="change"></u-tabs>
			<view class="filterItem">
				<view class="title">开始时间</view>
				<view :class="['datePickerBox',workPostStartTime?'datePickerBoxHaveVal':'']" @click="clickPicker('showWorkPostStartTime')">
					{{workPostStartTime||'点击选择开始时间'}}
					<u-picker class="picker"  v-model="showWorkPostStartTime" mode="time" :params='params' @confirm="(e)=>confirmPicker('workPostStartTime',e)"></u-picker>
				</view>
			</view>
			<view class="filterItem">
				<view class="title">结束时间</view>
				<view :class="['datePickerBox',workPostEndTime?'datePickerBoxHaveVal':'']" @click="clickPicker('showWorkPostEndTime')">
					{{workPostEndTime||'点击选择结束时间'}}
					<u-picker class="picker"  v-model="showWorkPostEndTime" mode="time" :params='params' @confirm="(e)=>confirmPicker('workPostEndTime',e)"></u-picker>
				</view>
			</view>
			<view class="but" @click="getdata(true)">查询</view>
		</view>
		<view class="item" v-for="(e,i) in orderList" :key="i">
			<view class="info">
				<view class="infoItem">
					<view class="title">{{e.workType==1?'上岗':'下岗'}}时间：</view>
					<view class="value">{{getDate(e.workPostTime)}}</view>
				</view>
				<view class="infoItem">
					<view class="title">岗位：</view>
					<view class="value name">{{e.workPostName}}</view>
				</view>
				<view class="infoItem">
					<view class="title">工位：</view>
					<view class="value people">{{e.workstationName}}</view>
				</view>
				<view class="infoItem">
					<view class="title">备注：</view>
					<view class="value people">{{e.remark}}</view>
				</view>
				<view class="infoItem">
					<view class="title">工作类型：</view>
					<view class="value">{{e.workType==1?'上岗':'下岗'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '已受理',
					value: 0
				}, {
					name: '已分配',
					value: 1
				}, {
					name: '已确认',
					value: 2
				}, {
					name: '已评价',
					value: 3
				}],
				
				params: {
					pageNum: 1,
					pageSize: 20,
					status: 0,
				},
				
				
				orderList:[],
				pageNum:1,
				pageSize:10,
				title:'',
				workPostStartTime:'',
				showWorkPostStartTime:false,
				workPostEndTime:'',
				showWorkPostEndTime:false,
				workType:null,
				workTypeList: [{
					text: '全部',
					value: null
				},{
					text: '上班',
					value: 1
				}, {
					text: '下班',
					value: 2
				}],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad(e) {
			this.title = e.name
			uni.setNavigationBarTitle({
				title:e.name
			})
			this.getdata()
		},
		onReachBottom(){
			this.pageNum++
			this.getdata()
		},
		methods: {
			change(index) {
				this.params.status = this.list[index].value;
				this.setSize()
				this.getData1()
			},
		
			getData1() {
				this.status = 'loading'
				const params = {
					pageNum: this.params.pageNum,
					pageSize: this.params.pageSize,
				}
				this.$u.api.workOrder.list(this.params).then(res => {
					if (res.total <= (this.params.pageSize * this.params.pageNum))
						this.status = 'nomore'
					res.list.map(d => {
						this.workOrderList.push(d)
					})
				})
			},
			//重置页码
			setSize() {
				this.workOrderList = []
				this.status = 'loadmore'
				this.params.pageNum = 1
				this.params.pageSize = 8
			},
			
			
			clickPicker(item){
				this[item]=true
			},
			confirmPicker(item,e){
				this[item] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
			},
			getDate(res){
				//返回  yyyy-mm-dd hh-mm-ss格式的时间
				const date = new Date(res)
				const year = date.getFullYear()
				const month = date.getMonth()+1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			getdata(flag){
				const  par  = {
					openid:uni.getStorageSync('openid'),
					pageNum:this.pageNum,
					// param:`{"orderBy":"work_post_time","sort":"desc","workPostStartTime":"${this.workPostStartTime}","workPostEndTime":"${this.workPostEndTime}","workType":"${this.workType}"}`,
					param:`{"workPostStartTime":"${this.workPostStartTime}","workPostEndTime":"${this.workPostEndTime}","workType":"${this.workType}"}`,
					pageSize:this.pageSize
				}
				this.$u.api.getMyWorkRecord(par).then(res => {
					if(res.code==200){
						if(flag){
							this.orderList = res.rows
						}else{
							this.orderList =  this.orderList.concat(res.rows)
						}
						uni.setNavigationBarTitle({
							title:`${this.title}(${res.total})条`
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderListWrapper{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #f4f7fe;
		.filterBox{
			.filterItem{
				display: flex;
				margin-bottom: 40rpx;
				.title{
					flex-shrink: 0;
					width: inherit;
					height: 50rpx;
					position: relative;
					padding-left: 10rpx;
					line-height: 50rpx;
					font-weight: bold;
					margin-right: 50rpx;
					&::before{
						content: '';
						width: 8rpx;
						height: 50rpx;
						border-radius: 3rpx;
						position: absolute;
						top: 0%;
						left: 0%;
						transform: translateX(-100%);
						background-color: #05c;
					}
				}
				.radioBox{
					width: 100%;
					flex-shrink: 1;
					height: 50rpx;
					line-height: 50rpx;
				}
				.datePickerBox{
					width: 100%;
					flex-shrink: 1;
					height: 50rpx;
					line-height: 50rpx;
					color: #0008;
					border: 2rpx solid #ddd;
					&HaveVal{
						color: #000;
					}
				}
			}
			.but{
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 20rpx;
				margin: 20rpx auto;
				background-color: #05c;
				color: #fff;
			}
		}
		
		.item{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			.type{
				width: 100%;
				font-size: 36rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 2rpx solid #eee;
			}
			.info{
				width: 100%;
				.infoItem{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					.title{
						color: #000;
					}
					.value{
						width: 60%;
						color: #dbdbdb;
					}
					.people{
						color: #787393;
					}
					.name{
						color: #7187a5;
					}
					&:last-child{
						border-top: 2rpx solid #ededed;
						margin-top: 40rpx;
						.value{
							color: #000;
						}
					}
				}
			}
		}
	}
</style>